<template>
  <div class="fw fh">
    <el-row>
      <el-col :span="14">
        <el-card class="mr-10">
          <template #header>
            <div class="flexBetween">
              <div class="title">人员设置</div>
              <el-button type="primary" @click="addPlayer">添加人员</el-button>
            </div>
          </template>
          <el-table border :data="playerList" class="mb-10">
            <el-table-column prop="name" label="名称" width="150">
              <template #default="{ row }">
                <el-input v-model="row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="round" label="本次博饼结果">
              <template #default="{ row }">
                <div class="list">
                  <div v-for="(numb, index) in row.round" :key="`${row.name}-numb-${index}`" :class="`dice numb-${numb}`">
                    <div v-for="item in numb" :key="item" class="dot"></div>
                  </div>
                  <span class="ml-10">{{ row.roundRes }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="flexBetween">
            <el-button class="mr-10" type="primary" @click="playplay">开始一轮博饼</el-button>
            <div>
              <el-input-number :min="0" :max="300" controls-position="right" v-model="autoplayOption.count"></el-input-number>
              <el-button type="primary" @click="autoplay">自动博饼</el-button>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="10">
        <el-card>
          <template #header>
            <div class="title">获奖名单</div>
          </template>
          <el-table border :data="awardsList" :span-method="objectSpanMethod">
            <el-table-column align="center" label="奖项">
              <el-table-column prop="suffix" width="50"></el-table-column>
              <el-table-column prop="name" width="90"></el-table-column>
              <el-table-column prop="rule" width="300">
                <template #default="{ row }">
                  <div class="list">
                    <template v-if="!row.winner">
                      <div v-for="numb in row.rule" :key="`win-${row.name}-numb-${index}`" :class="`dice numb-${numb}`">
                        <div v-for="item in numb" :key="item" class="dot"></div>
                      </div>
                    </template>
                    <template v-else>
                      <div v-for="numb in row.winner.round" :key="numb" :class="`dice numb-${numb}`">
                        <div v-for="item in numb" :key="item" class="dot"></div>
                      </div>
                    </template>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="winner.name" label="获奖人员" width="150"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, reactive } from "vue";
import { ElMessageBox } from "element-plus";

const awardsList = ref([
  {
    name: "插金花",
    rule: [4, 4, 4, 4, 1, 1],
    winner: null,
  },
  {
    suffix: "状元",
    name: "六杯红",
    rule: [4, 4, 4, 4, 4, 4],
  },
  {
    suffix: "状元",
    name: "遍地锦",
    rule: [1, 1, 1, 1, 1, 1],
  },
  {
    suffix: "状元",
    name: "黑六勃",
    rule: [2, 2, 2, 2, 2, 2],
  },
  {
    suffix: "状元",
    name: "五红",
    rule: [4, 4, 4, 4, 4, 1],
  },
  {
    suffix: "状元",
    name: "五子登科",
    rule: [2, 2, 2, 2, 2, 0],
  },
  {
    suffix: "状元",
    name: "四点红",
    rule: [4, 4, 4, 4, 0, 0],
  },
  {
    name: "榜眼",
    rule: [1, 2, 3, 4, 5, 6],
  },
  {
    name: "探花",
    rule: [4, 4, 4, 0, 0, 0],
  },
  {
    name: "进士",
    rule: [2, 2, 2, 2, 0, 0],
  },
  {
    name: "举人",
    rule: [4, 4, 0, 0, 0, 0],
  },
  {
    name: "秀才",
    rule: [4, 0, 0, 0, 0, 0],
  },
]);
const playerList = ref([]);
const autoplayOption = reactive({
  count: 10,
  isStart: false,
});
/** 合并状元行 */
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (row.suffix) {
      if (rowIndex < 2) {
        return {
          rowspan: 6,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  } else if (columnIndex === 1 && !row.suffix) {
    return {
      rowspan: 1,
      colspan: 2,
    };
  }
};
class Player {
  name: string;
  round: number[]; // 本轮博饼骰子结果
  roundRes: string; // 点数官职
}
const addPlayer = () => {
  playerList.value.push(new Player());
};
/** 开始 */
const playplay = () => {
  if (!playerList.value.length) {
    ElMessageBox({
      title: "提示",
      message: "没有博饼人员，请先添加哦！",
      type: "warning",
    });
    return;
  }
  playerList.value = playerList.value.map((item) => {
    item.round = roll();
    item.roundRes = computedRes(item, item.round);
    return item;
  });
};
let autoplayTimer = null;
const autoplay = () => {
  const clear = () => {
    autoplayTimer && clearInterval(autoplayTimer);
    autoplayOption.isStart = false;
  };
  if (!playerList.value.length) {
    ElMessageBox({
      title: "提示",
      message: "没有博饼人员，请先添加哦！",
      type: "warning",
    });
    return;
  }
  if (autoplayOption.isStart) {
    clear();
    return;
  }
  autoplayOption.isStart = true;
  autoplayTimer = setInterval(() => {
    if (autoplayOption.count <= 0) {
      clear();
      return;
    }
    playplay();
    autoplayOption.count--;
  }, 1000);
};
/** roll点 */
const roll = () => {
  let res = [];
  for (let i = 0; i < 6; i++) {
    const numb = Math.floor(Math.random() * 6) + 1;
    res.push(numb);
  }
  return res;
};
/** 计算结果 */
const computedRes = (player: Player, dices: Number[]) => {
  const map = dices.reduce((map, numb: number) => {
    const key = numb.toString();
    map[key] = map[key] ? map[key] + 1 : 1;
    return map;
  }, {} as any);
  if (map[4] === 4 && map[1] === 2) {
    !awardsList.value[0].winner && (awardsList.value[0].winner = { ...player });
    return "插金花";
  } else if (map[4] === 6) {
    !awardsList.value[1].winner && (awardsList.value[1].winner = { ...player });
    return "状元-六杯红";
  } else if (map[1] === 6) {
    !awardsList.value[2].winner && (awardsList.value[2].winner = { ...player });
    return "状元-遍地锦";
  } else if ([map[2], map[3], map[5], map[6]].includes(6)) {
    !awardsList.value[3].winner && (awardsList.value[3].winner = { ...player });
    return "状元-黑六勃";
  } else if (map[4] === 5) {
    if (!awardsList.value[4].winner) {
      awardsList.value[4].winner = { ...player };
    } else {
      const rival = awardsList.value[4].winner.round.reduce((goal: number, numb: number) => {
        goal += numb;
        return goal;
      }, 0);
      const goal = dices.reduce((goal: number, numb: number) => {
        goal += numb;
        return goal;
      }, 0);
      if (rival < goal) {
        awardsList.value[4].winner = { ...player };
      }
    }
    return "状元-五红";
  } else if ([map[1], map[2], map[3], map[4], map[5], map[6]].includes(5)) {
    if (!awardsList.value[5].winner) {
      awardsList.value[5].winner = { ...player };
    } else {
      const rival = awardsList.value[5].winner.round.reduce((goal: number, numb: number) => {
        goal += numb;
        return goal;
      }, 0);
      const goal = dices.reduce((goal: number, numb: number) => {
        goal += numb;
        return goal;
      }, 0);
      if (rival < goal) {
        awardsList.value[5].winner = { ...player };
      }
    }
    return "状元-五子登科";
  } else if (map[4] === 4) {
    if (!awardsList.value[6].winner) {
      awardsList.value[6].winner = { ...player };
    } else {
      const rival = awardsList.value[6].winner.round.reduce((goal: number, numb: number) => {
        goal += numb;
        return goal;
      }, 0);
      const goal = dices.reduce((goal: number, numb: number) => {
        goal += numb;
        return goal;
      }, 0);
      if (rival < goal) {
        awardsList.value[6].winner = { ...player };
      }
    }
    return "状元-四点红";
  } else if (map[1] === 1 && map[2] === 1 && map[3] === 1 && map[4] === 1 && map[5] === 1 && map[6] === 1) {
    return "榜眼";
  } else if (map[4] === 3) {
    return "探花";
  } else if ([map[1], map[2], map[3], map[4], map[5], map[6]].includes(4)) {
    return "进士";
  } else if (map[4] === 2) {
    return "举人";
  } else if (map[4] === 1) {
    return "秀才";
  }
};
</script>

<style scoped lang="scss">
.ml-10 {
  margin-left: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.mb-10 {
  margin-bottom: 10px;
}
.flexStart {
  display: flex;
}
.flexBetween {
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding-left: 10px;
  position: relative;
  color: var(--el-text-color-primary);

  &::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 75%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--el-color-primary);
    border-radius: 4px;
  }
}

.list {
  display: flex;
  align-items: center;
}

.dice {
  background: #fff;
  width: 35px;
  height: 35px;
  border-radius: 4px;
  border: 1px solid #333;
  display: inline-flex;
  padding: 5px;
  --dot-color: #333;

  + .dice {
    margin-left: 6px;
  }

  .dot {
    width: 8px;
    height: 8px;
    background-color: var(--dot-color);
    border-radius: 100%;
  }

  &.numb-1 {
    justify-content: center;
    align-items: center;
  }
  &.numb-2 {
    position: relative;
    .dot:nth-child(1) {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    .dot:nth-child(2) {
      position: absolute;
      bottom: 5px;
      right: 5px;
    }
  }
  &.numb-3 {
    position: relative;
    .dot:nth-child(1) {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    .dot:nth-child(2) {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .dot:nth-child(3) {
      position: absolute;
      bottom: 5px;
      right: 5px;
    }
  }
  &.numb-4,
  &.numb-5 {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .dot:nth-child(1),
    .dot:nth-child(2) {
      margin-bottom: 5px;
    }
  }
  &.numb-5 {
    position: relative;
    .dot:nth-child(3) {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &.numb-6 {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    .dot {
      width: 7px;
      height: 7px;
      margin-bottom: 2px;
    }

    .dot:nth-child(odd) {
      margin-right: 2px;
    }
  }

  &.numb-1,
  &.numb-4 {
    --dot-color: red;
  }
}
</style>
